<template>
    <div class="body">
        <div class="top">
            <div class="swiperBackground">
                <div class="swiper">
                    <div class="block" v-for="item in swiperList" :key="item.id">
                        <div class="icon">
                            <van-image :radius="25" width="70" height="70" :src="item.icon" />
                        </div>
                        <div class="text" style="text-align: center;font-size: 14px;color: white;">
                            {{ item.text }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="titleBar">
                <div class="left" style="margin-left: 15px;">
                    <div class="top" style="font-size: 20px;font-weight: bold;">云村解忧杂货铺</div>
                    <div class="bottom" style="font-size: 15px;color: #777777;font-family: '宋体';margin-top: 10px;">
                        7.4万树洞信使 ·5741人在线</div>
                </div>
                <div class="right" style="margin-right: 15px;">
                    <van-button size="small" style="height:30px;" plain round type="default">邀请好友</van-button>
                </div>
            </div>
        </div>
        <div class="select">
            <div class="selectBar">
                <div class="btn_select">
                    <div :class="{ active: currentTag === 1 }" @click="handler(1)">群聊</div>
                </div>
                <div class="btn_select">
                    <div :class="{ active: currentTag === 2 }" @click="handler(2)">圈内动态</div>
                </div>
                <div class="btn_select">
                    <div :class="{ active: currentTag === 3 }" @click="handler(3)">匿名信箱</div>
                </div>
            </div>
            <div class="content">
                <div class="cont_detail">
                    <div v-if="contentTag === 1">
                        <div class="title" style="color: #777777;font-size: 14px;">
                            <van-icon name="arrow-down" /> 讨论群
                        </div>
                        <div class="deta_content">
                            <div class="groupList" v-for="item in groupList" :key="item.id">
                                <div class="left">
                                    <div class="lef_left">
                                        <van-image round width="3rem" height="3rem" :src="item.icon" />
                                    </div>
                                    <div class="lef_right">
                                        <div class="top" style="font-size: 18px;">{{ item.title }}</div>
                                        <div class="bottom" style="font-size: 13px;color: #777777;">{{ item.text }}</div>
                                    </div>
                                </div>
                                <div class="right" v-if="item.message != 0">{{ item.message }}</div>
                            </div>
                        </div>
                    </div>
                    <div v-if="contentTag === 2">
                        <div class="title" style="color: #777777;font-size: 14px;">
                            <van-icon name="arrow-down" /> 圈内动态
                        </div>
                        <div class="deta_content">
                            <div class="groupList" v-for="item in circleList" :key="item.id">
                                <div class="left">
                                    <div class="lef_left">
                                        <van-image round width="3rem" height="3rem" :src="item.icon" />
                                    </div>
                                    <div class="lef_right">
                                        <div class="top" style="font-size: 18px;">{{ item.title }}</div>
                                        <div class="bottom" style="font-size: 13px;color: #777777;">{{ item.text }}</div>
                                    </div>
                                </div>
                                <div class="right" v-if="item.message != 0">{{ item.message }}</div>
                            </div>
                        </div>
                    </div>
                    <div v-if="contentTag === 3">
                        <div class="title" style="color: #777777;font-size: 14px;">
                            <van-icon name="arrow-down" /> 匿名消息
                        </div>
                        <div class="deta_content">
                            <div class="groupList" v-for="item in anonymityList" :key="item.id">
                                <div class="left">
                                    <div class="lef_left">
                                        <van-image round width="3rem" height="3rem" :src="item.icon" />
                                    </div>
                                    <div class="lef_right">
                                        <div class="top" style="font-size: 18px;">{{ item.title }}</div>
                                        <div class="bottom" style="font-size: 13px;color: #777777;">{{ item.text }}</div>
                                    </div>
                                </div>
                                <div class="right" v-if="item.message != 0">{{ item.message }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
const currentTag = ref(1);
const contentTag = ref(1);
const handler = (tag) => {
    currentTag.value = tag;
    contentTag.value = tag;
}
const swiperList = ref([
    { id: 0, icon: 'http://p1.music.126.net/qn4uhmcw_-7jhFwZHUc03A==/109951171363233379.jpg?param=130y130', text: '广场' },
    { id: 1, icon: 'http://p1.music.126.net/WMSzHA0iTF-Y5ukeHOZS7Q==/109951171354624131.jpg?param=130y130', text: 'OGS' },
    { id: 2, icon: 'http://p1.music.126.net/0Tc0VETqJejrjpVnVvaQUQ==/109951171315774897.jpg?param=130y130', text: '新生活' },
    { id: 3, icon: 'http://p1.music.126.net/SNz-5MqmJtBFc_qoeS-lwg==/109951171327886793.jpg?param=130y130', text: '我偷的故事' },
    { id: 4, icon: 'http://p1.music.126.net/Gy4n5iyxV33oOz5DGy3b_g==/109951171292659568.jpg?param=130y130', text: '鹿晗' },
    { id: 5, icon: 'http://p1.music.126.net/Dmg-cQJctLB_4ID4WRytIw==/109951171291365368.jpg?param=130y130', text: '邓紫棋' },
    { id: 6, icon: 'https://p2.music.126.net/HOZ0ThlnA7hlQ7oBSoC5mw==/109951171354511980.jpg?param=130y130', text: '草原孩子' },
    { id: 7, icon: 'https://p2.music.126.net/TY6S7tBFaJAkOD5-p6V0sQ==/109951171409960795.jpg?param=130y130', text: '坏学生' },
]);
const groupList = ref([
    { id: 0, icon: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.8K4QIghSsEvj4PxQi-l-1AHaHa?w=198&h=198&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3', text: '小歌迷：发新歌！', title: '最好音乐圈', message: '64' },
    { id: 1, icon: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.N4fdcB2x05OOIb02HGUweAHaHa?w=176&h=180&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3', text: '森山：好久不见', title: '疯狂七人组', message: '15' },
    { id: 2, icon: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.5nnyGV-nuawiFkTP4jZzPAHaHa?w=176&h=180&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3', text: '最终的你：正好看见你哈哈哈', title: '秘密聊天群', message: '0' },
    { id: 3, icon: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.8K4QIghSsEvj4PxQi-l-1AHaHa?w=198&h=198&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3', text: '一块苏打饼：这不多听几遍？', title: '暗恋这件小事', message: '0' },
    { id: 4, icon: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.N4fdcB2x05OOIb02HGUweAHaHa?w=176&h=180&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3', text: '毛不难：我能免费下载吗', title: '终于等到你', message: '0' },
]);
const circleList = ref([
    { id: 0, icon: 'http://p1.music.126.net/cSAmmAvsKhm3N-zxWg7QcQ==/109951168490195225.jpg?param=130y130', text: '新歌速递！！！', title: '张惠妹', message: '1' },
    { id: 1, icon: 'http://p1.music.126.net/whG7pbsbd1akKtOE7V3R_Q==/109951168299161319.jpg?param=130y130', text: '下次跟韩红老师继续合作', title: '孙楠', message: '0' },
    { id: 2, icon: 'http://p1.music.126.net/r6W-zCnV-aduVn_PLZYuYg==/109951168529049969.jpg?param=130y130', text: '正在准备新歌', title: '林俊杰', message: '0' },
]);
const anonymityList = ref([
    { id: 0, icon: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.Jz6g8-aJngAY58pcgkj9UAHaGq?w=224&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2', text: '4个陌生人发来6条消息', title: '匿名信箱', message: '6' },
    { id: 1, icon: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.-lbwG1WtjZUTkAP8A46P4AAAAA?w=190&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2', text: '哈哈', title: '行走的鱼', message: '0' },
]);
</script>
<style lang="less" scoped>
.top {
    // background: linear-gradient(0deg, #FFFFFF 10%, #F3E7E9 100%);

    .swiperBackground {
        background: linear-gradient(0deg, #A084BA 10%, #C88FEC 60.41%, #8866DD 100%);

        .swiper {
            overflow-x: auto;
            display: flex;

            .block {
                margin: 20px 10px 60px;
            }
        }

        .swiper::-webkit-scrollbar {
            display: none;
        }
    }

    .titleBar {
        position: relative;
        top: -40px;
        width: 90%;
        height: 90px;
        margin: auto;
        background-color: white;
        box-shadow: 0px 0px 20px rgb(126, 124, 124);
        border-radius: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

}

.select {
    .selectBar {
        display: flex;
        align-items: center;

        .btn_select {
            margin-left: 20px;

            .active {
                padding: 5px 10px;
                background-color: rgb(253, 201, 201);
                border-radius: 20px;
                color: rgb(242, 3, 3);
                font-weight: 600;
            }
        }
    }

    .content {
        .cont_detail {
            margin: 10px 15px;

            .deta_content {
                .groupList {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 10px;

                    .left {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .lef_right{
                            margin-left: 10px;
                            line-height: 1.5em;
                        }
                    }
                    .right {
                        background-color: #757575;
                        border-radius: 25px;
                        color: white;
                        padding: 3px 7px;
                        align-items: center;
                        text-align: center;
                    }
                }
            }
        }
    }
}
</style>